<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich">

<ui:composition template="/templates/main.xhtml">
    <ui:define name="body">
        
        <ul class="breadcrumb">
			<li><a href="#">1: Select Customer</a></li>
			<li><a href="#" class="breadcrumb-current">2: Add Products</a></li>
			<li><a href="#">3: Payment</a></li>
			<li><a href="#">4: Print Invoice</a></li>
		</ul>
        
        <rich:simpleTogglePanel switchType="client" label="Customer Information">
	        <h:panelGrid columns="5" title="Customer" rowClasses="s1row" columnClasses="gridLabel,gridValue,gridSpace,gridLabel,gridValue">
		        <h:outputText value="Name: " />
				<h:outputText value="#{customer.name}" />
				<h:outputText value="&nbsp;" />
				<h:outputText value="Phone: " />
				<h:outputText value="#{customer.phone}" />
				
				
				<h:outputText value="Address: " />
				<h:outputText value="#{customer.adresse}" />
				<h:outputText value="&nbsp;" />
				<h:outputText value="TaxId: " />
				<h:outputText value="#{customer.taxId}" />
				
				<h:outputText value="City: " />
				<h:outputText value="#{customer.city}" />
				<h:outputText value="&nbsp;" />
				<h:outputText value="State: " />
				<h:outputText value="#{customer.state}" />
				
				<h:outputText value="Zip: " />
				<h:outputText value="#{customer.zip}" />
				
			</h:panelGrid>
    	</rich:simpleTogglePanel>
    	
    	<h:form>
    		
    		<rich:simpleTogglePanel switchType="client" label="Product Selection">
    		
	    		<h:panelGrid columns="7" title="Product Selection" columnClasses="gridLabel,gridValue,gridSpace,gridLabel,gridValue,gridSpace">
	    	
	    			<h:outputText value="Category" />
	    	
		    		<h:selectOneMenu value="#{customerController.categoryId}" valueChangeListener="#{customerController.categoryChanged}">
					        <f:selectItem itemLabel="Select" />
					        <f:selectItems value="#{customerController.categories}" var="category" itemValue="#{category.categoryId}" itemLabel="#{category.name}"/>
					        <a4j:support event="onchange" reRender="products" />
					</h:selectOneMenu>  
					 
					<h:outputText value="&nbsp;" /> 
					 
					<h:outputText value="Product" /> 
					 
					<h:selectOneMenu value="#{customerController.productId}" id="products">
					        <f:selectItem itemLabel="Select a Category" />
					        <f:selectItems value="#{customerController.products}" var="product" itemValue="#{product.productId}" itemLabel="#{product.name}"/>
					 </h:selectOneMenu> 
					 
					 <h:outputText value="&nbsp;" />
	
			    	 <a4j:commandLink styleClass="button-blue" style="padding:6px 20px; margin-bottom: 10px" value="Add Product" action="#{customerController.addProduct}" reRender="productList" />
	    			
	   			</h:panelGrid>
   			
				<rich:messages styleClass="msg-warning" >
					  <f:facet name="warnMarker">
			            &nbsp;
				      </f:facet>
				</rich:messages>   			
   			
   			</rich:simpleTogglePanel>
   			
    	</h:form>
    	
    	
    		<rich:dataTable id="productList" cellpadding="0" cellspacing="0" border="0"
				var="list" value="#{customerController.productList}" style="text-align:center;"
				rows="5" width="100%">
				<f:facet name="header">
					<rich:columnGroup>
						<rich:column>
							<h:outputText value="Category" />
						</rich:column>
						<rich:column>
							<h:outputText value="Product" />
						</rich:column>
						<rich:column>
							<h:outputText value="Price" />
						</rich:column>
					</rich:columnGroup>
				</f:facet>
				<rich:column>
					<h:outputText value="#{list.category.name}" />
				</rich:column>
				<rich:column>
					<h:outputText value="#{list.name}" />
				</rich:column>
				<rich:column>
					<h:outputText value="#{list.price}" />
				</rich:column>
	
			</rich:dataTable>
    	

    </ui:define>
</ui:composition>    
    
</html>